<template>
    <view class="row4-view flex-box">
        <view class="item" v-for="(item, index) in arr" :key="index" @tap="bindTab(index)" :class="{act:heightLight ? index === current: null }">
            <text class="num">{{ item.number }}</text>
            <text class="des">{{ item.des }}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: ['arr', "heightLight"],
    data() {
        return {
            current: 0
        };
    },
    methods: {
        // 哦
        bindTab(index) {
            this.current = index
            this.$emit('bindTab', index)
        }
    }

};
</script>

<style lang="scss">
.act {
    color: #ffffff;
    background: #0062a1
}

.row4-view {
    border: 1rpx solid $border-grey;
    border-radius: 10rpx;
    width: 96%;
    margin: $spacing-center auto;

    .item {
        width: 25%;
        text-align: center;
        padding: $spacing-x 0;
        border-right: 1rpx solid $border-grey;

        &:last-child {
            border-right: none;
        }
    }

    .num {
        font-size: 30rpx;
        display: block;
        line-height: 1.2;
        font-weight: bold;
    }
}
</style>
